import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'

import index from 'assets/images/index.png'
import indexActive from 'assets/images/index-active.png'
import theater from 'assets/images/theater.png'
import theaterActive from 'assets/images/theater-active.png'
import ticket from 'assets/images/ticket.png'
import ticketActive from 'assets/images/index-active.png'
import mine from 'assets/images/mine.png'
import mineActive from 'assets/images/index-active.png'

import { Index,Theater } from './index'

class Layout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'index',
            hidden: false,
            fullScreen: true
        }
    }

    render() {
        return (
          <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
            <TabBar
              unselectedTintColor="#666"
              tintColor="#000"
              barTintColor="white"
              hidden={this.state.hidden}
            >
              <TabBar.Item
                title="首页"
                key="index"
                icon={<div style={{
                  width: '25px',
                  height: '25px',
                  background:`url(${index}) center center / 25px 25px no-repeat`
                }}
                />
                }
                selectedIcon={<div style={{
                  width: '25px',
                  height: '25px',
                  background:`url(${indexActive}) center center / 25px 25px no-repeat`
                }}
                />
                }
                selected={this.state.selectedTab === 'index'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'index',
                  });
                }}
              >
                <Index></Index>
              </TabBar.Item>
              <TabBar.Item
                icon={
                  <div style={{
                    width: '25px',
                    height: '25px',
                    background:`url(${theater}) center center / 25px 25px no-repeat`
                    }}
                  />
                }
                selectedIcon={
                  <div style={{
                    width: '25px',
                    height: '25px',
                    background:`url(${theaterActive}) center center / 25px 25px no-repeat`
                }}
                  />
                }
                title="剧院"
                key="theater"
                selected={this.state.selectedTab === 'theater'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'theater',
                  });
                }}
              >
                <Theater></Theater>
              </TabBar.Item>
              <TabBar.Item
                icon={
                  <div style={{
                    width: '25px',
                    height: '25px',
                    background:`url(${ticket}) center center / 25px 25px no-repeat`
                }}
                  />
                }
                selectedIcon={<div style={{
                    width: '25px',
                    height: '25px',
                    background:`url(${ticketActive}) center center / 25px 25px no-repeat`
                  }}
                  />
                  }
                title="票夹"
                key="ticket"
                selected={this.state.selectedTab === 'ticket'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'ticket',
                  });
                }}
              >
                <div>c</div>
              </TabBar.Item>
              <TabBar.Item
                icon = {{ uri: mine }}
                selectedIcon = {{ uri: mineActive }}
                title="我的"
                key="mine"
                selected={this.state.selectedTab === 'mine'}
                onPress={() => {
                  this.setState({
                    selectedTab: 'mine',
                  });
                }}
              >
                <div>d</div>
              </TabBar.Item>
            </TabBar>
          </div>
        );
    }
}

export default Layout;